<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05绘制圆弧</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid gold;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="500">
			<!--Canvas标签宽高默认值为 300*150-->
			当前浏览器版本过低 不支持 Canvas, 请升级!
			<!-- 
				IE 9+ 及其他浏览器都支持Canvas
				IE 9 以下, 可使用 Google 开发的 ExplorerCanvas 插件
			 -->
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取 canvas标签
		var firCan = document.getElementById("firCan");
		// 2, 获取 2D渲染上下文
		var context = firCan.getContext('2d');
		// 3, 绘制圆弧
		context.beginPath();
		// 弧度, π = 180°
		/*
		 * 绘制圆弧: arc(x, y, r, start_Ang, end_Ang, isAnticlockwise)
		 * 六个参数:
		 * 		x 和 y				确定圆心位置
		 * 		r					圆的半径
		 * 		start_Ang			开始弧度
		 * 		end_Ang				结束弧度
		 * 		isAnticlockwise		是否逆时针绘制
		 */
		context.arc(500, 250, 200, 0, Math.PI / 2, false);
		context.stroke();
		
		// 练习: 绘制扇形
		context.beginPath();
		context.moveTo(800, 200);
		context.arc(800, 200, 100, 0, Math.PI / 4, false);
		context.closePath();
		context.stroke();
		
		// 重置 canvas 的大小
		firCan.width = 1000;
		firCan.height = 500;
		
		/*
		 * 绘制椭圆:
		 */
		if (context.ellipse) {
			context.beginPath();
			/*
			 * 椭圆: ellipse(x, y, lr, sr, rotation, startAng, endAng, isAnticlockwise)
			 * 八个参数:
			 * 	x 和 y			椭圆中心点的位置
			 * 	lr				长轴半径
			 * 	sr				短轴半径
			 * 	rotation			旋转角度
			 * 	startAng			开始弧度
			 * 	endAng			结束弧度
			 * 	isAnticlockwise	是否逆时针
			 * 注意: 该方法存在很大的兼容性问题, 使用时要慎重
			 */
			context.ellipse(500, 250, 300, 200, 0, 0, Math.PI * 2, false);
			context.stroke();
		} else{
			alert("您浏览器不支持绘制椭圆!");
		}
		
		
		
	</script>
</html>
